<template>
  <div class="footer" v-if="todos.length !== 0">
    <span>{{ unTodoCount }}项未完成</span>
    <div>
      <span @click="$emit('clearDone')">清除已完成</span>
      <span class="selectAll" @click="checkAll">全选</span>
    </div>
  </div>
  <div v-else style="text-align: center; color: red">暂无任务</div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps(["todos"]);

// 计算未完成的todo数量
const unTodoCount = computed(() => {
  return props.todos.filter((todo) => !todo.isDone).length;
});

// 全选
let isAll = false;
const checkAll = () => {
  isAll = !isAll;
  props.todos.forEach((todo) => {
    todo.isDone = isAll;
  });
};
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .selectAll {
    margin-left: 10px;
  }
}
</style>